<template>
	<view class="container">
		<view class="product-row">
			<image :src="productCover" mode="aspectFit" class="product-img"></image>
			<view class="product-info">
				<text class="product-name">1件{{productName}}</text>
			</view>
		</view>
		<view class="order-item">
			<text class="label">订单编号</text>
			<text class="value">{{orderNo}}</text>
		</view>
		<view class="order-item">
			<text class="label">订单总价</text>
			<text class="price">{{productPrice}}元</text>
		</view>
		<view class="order-item">
			<text class="label">下单时间</text>
			<text class="value">{{createTime}}</text>
		</view>
		<view class="order-item">
			<text class="label">支付时间</text>
			<text class="value">{{payTime}}</text>
		</view>

		<!-- 已出货 -->
		<view v-if="outStatus" class="status-container">
			<text class="completed-text">已完成</text>
		</view>

		<view v-else-if="payStatus" class="status-container">
			<text class="pay-code">出货码: {{payCode}}</text>
			<button class="delivery-button" @click="onDeliveryButtonClicked()">取货</button>
		</view>

		<view v-else class="status-container">
			<button class="pay-button">支付</button>
		</view>
	</view>
</template>

<script>
	let tag = "order"
	export default {
		onLoad(para) {
			this.$log.info(tag, "onLoad")
			this.$log.info(tag, JSON.stringify(para))
			this.orderNo = para.orderNo
			this.fetchOrderDetail(this.orderNo)
		},
		data() {
			return {
				orderNo: "",
				productName: "",
				productCover: "",
				productPrice: "",
				createTime: "",
				payTime: "",
				orderStatus: "",
				payStatus: "",
				payCode: "",
				outStatus: false,
			}
		},
		methods: {
			onDeliveryButtonClicked() {
				this.$log.info(tag, "onDeliveryButtonClicked")
				this.deliverOrder(this.orderNo)
			},
			deliverOrder(orderNo) {
				this.$log.info(tag, "deliverOrder")
				uni.request({
					url: `${this.constant.BASE_URL}/api/order/remotePick`,
					method: 'GET',
					header: {
						'Authorization': this.loginManager.getToken(),
					},
					data: {
						"orderNo": orderNo
					},
					success: (res) => {
						this.$log.info(tag, "success")
						this.$log.info(tag, JSON.stringify(res.data))
					},
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
					}
				})
			},
			isOut() {
				return this.orderStatus == "已出货"
			},
			isPaid() {
				return this.payStatus == "已支付"
			},
			fetchOrderDetail(orderNo) {
				this.$log.info(tag, `fetchOrderDetail orderNo: ${orderNo}`)
				uni.request({
					url: `${this.constant.BASE_URL}/api/order/${orderNo}`,
					method: 'POST',
					header: {
						'Authorization': this.loginManager.getToken(),
					},
					success: (res) => {
						this.$log.info(tag, "success")
						this.$log.info(tag, JSON.stringify(res.data))
						if (res.data.code == 200) {
							let order = res.data.data
							this.productCover = `${this.constant.BASE_URL}${order.productCover}`
							this.productName = order.productName
							this.productPrice = order.productPrice
							this.createTime = order.createTime
							this.orderNo = order.orderNo
							this.payTime = order.payTime
							this.orderStatus = order.orderStatus
							this.payStatus = order.payStatus
							this.payCode = order.payCode
							if (order.payStatus == "已支付") {
								this.payStatus = true
							}
							if (order.orderStatus == "已出货") {
								this.outStatus = true
							}
						}
					},
					fail: (err) => {
						this.$log.error(tag, err.errMsg)
					}
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 30rpx;
		background-color: #fff;
		min-height: 100vh;
	}

	.product-row {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.product-img {
		width: 180rpx;
		height: 360rpx;
		margin-right: 30rpx;
	}

	.product-info {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 100%;
	}

	.product-name {
		font-size: 34rpx;
		color: #999;
		text-align: right;
	}

	.order-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.label {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.value {
		font-size: 32rpx;
		color: #999;
	}

	.price {
		font-size: 32rpx;
		color: #0091ff;
		font-weight: bold;
	}

	/* 新加的状态部分样式 */
	.status-container {
		margin-top: 60rpx;
		padding: 40rpx;
		background-color: #f8f9fa;
		border-radius: 16rpx;
		text-align: center;
	}

	.completed-text {
		font-size: 36rpx;
		color: #0091ff;
		font-weight: bold;
	}

	.pay-code {
		font-size: 32rpx;
		color: #0091ff;
		font-weight: bold;
		margin-bottom: 30rpx;
		display: block;
	}

	.pay-button {
		width: 200rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #0091ff 0%, #0066cc 100%);
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.delivery-button {
		width: 200rpx;
		height: 80rpx;
		background: linear-gradient(135deg, #0091ff 0%, #0066cc 100%);
		color: white;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}
</style>